iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
1
自我挑戰組

從頭開始的API 和ajax系列 第 9

Day9-JSONP如何運作ㄦ 給上?子

  • 分享至 

  • xImage
  •  

我們在寫網頁要引入 其他js
不是都要用這個 Tag,像要導入jquery
Google Analytics 之類的第三方套件嗎?網址都是其他 Domain 的,但是卻能正常載入。

JSONP 就是利用的這個特性來達成跨來源請求的。

###瀏覽器端
1.html 需要兩段Javascript

一個函式可處理伺服器回傳的JSNOP資料 在下面的範例中

此函式為 show()
2.一個 元件中的src屬性 可向遠端伺服器發送JSON資料請求

<script>
function show(data){
    //處理資料顯示資料
    //於頁面程式敘述
}
</script>
<script src="https://example.org/jsonp"></script>

###伺服器端
伺服器回應 會包含一個呼叫資料處理的命名函式 (上面鎖定義的函式)
此函式呼叫 在JSONP 中一個像是填補的動作 JSON格式 資料則以引數方式傳遞函式中
在下面 JSONP資料在呼叫show()
函式時便至於引數位置

show({
 "events":[
     {
      "location":"taipei";
      "date":"OCT 31",
      "MAP":"img/cat.png"
     
     
     }

 ]
})

注意:利用 JSONP,也可以存取跨來源的資料。但 JSONP 的缺點就是你要帶的那些參數永遠都只能用附加在網址上的方式(GET)帶過去,沒辦法用 POST。
重要的事 在此運用JSONP 不需要使用JSON物件 parse()
stringify()
因為資料是以一個程式腳本檔案傳送 非字串 被視為一個物件。

localHandler({"result":"我是遠方js帶來的數據"});

本機

<script type="text/javascript"> 
    var localHandler = function(data){
        alert('我是本地函數,可以被跨域的remote.js文件調用,遠程js帶來的資料是:' + data.result); 
    }; 
</script> 
<script type="text/javascript" src="跨域服務器/remote.js"></script>

1、本機定義一個函數
2、引入一個js
3、被引入的js裏面,調用這個函數

頁面將會彈出一個提示窗。顯示本機函數被跨域的遠程js調用成功,並且還接收到了 我是遠程js帶來的資料。
###與AJAX的區別是什麽?
ajax和jsonp本質上是不同的東西。
ajax的核心是通過XmlHttpRequest獲取非本頁內容
jsonp的核心則是動態添加標簽來調用服務器提供的js腳本。


上一篇
Day8-什麼是CROS (Cross-Origin Resource Sharing)
系列文
從頭開始的API 和ajax9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
anli
iT邦新手 5 級 ‧ 2019-11-11 18:09:20

可惜沒了

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-22 10:34:55

阿 !! 斷惹/images/emoticon/emoticon04.gif

我要留言

立即登入留言